<template>
  <div class="filter">
    <ul
      class="tag-lang"
      v-if="diff.indexOf('musicType') != -1 && $route.name == 'homeArtist'"
    >
      <li
        v-for="item of musicArtistTypes"
        :key="item.value"
        :class="musicType == item.value ? 'active' : ''"
        @click="chooseType('musicType', item)"
      >
        {{ $i18n.locale === "zh" ? item.labelCname : item.labelName }}
      </li>
    </ul>
    <ul
      class="tag-lang"
      v-if="diff.indexOf('musicType') != -1 && $route.name == 'homeSort'"
    >
      <li
        v-for="item of musicSortTypes"
        :key="item.value"
        :class="musicType == item.value ? 'active' : ''"
        @click="chooseType('musicType', item)"
      >
        {{ $i18n.locale === "zh" ? item.labelCname : item.labelName }}
      </li>
    </ul>
    <ul class="tag-lang tag-type" v-if="diff.indexOf('sort') != -1">
      <li
        v-for="item of sorts"
        :key="item.value"
        :class="sort == item.value ? 'active' : ''"
        @click="chooseType('sort', item)"
      >
        {{ $i18n.locale === "zh" ? item.labelCname : item.labelName }}
      </li>
    </ul>
    <ul class="tag-lang tag-en" v-if="diff.indexOf('en') != -1">
      <li
        v-for="item of ens"
        :key="item.label"
        :class="en == item.value ? 'active' : ''"
        @click="chooseType('en', item)"
      >
        {{ item.label }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    diff: {
      type: Array,
    },
  },
  data() {
    return {
      // 语种
      musicType: "classical",
      musicArtistTypes: [
        {
          value: "classical",
          labelName: "Classical music",
          labelCname: "古典音乐",
        },
        {
          value: "national",
          labelName: "World nation",
          labelCname: "世界民族",
        },
        {
          value: "jazz",
          labelName: "Jazz",
          labelCname: "爵士",
        },
      ],
      musicSortTypes: [
        {
          value: "classical",
          labelName: "Classical music",
          labelCname: "古典音乐",
        },
        {
          value: "jazz",
          labelName: "Jazz",
          labelCname: "爵士",
        },
      ],
      // 分类
      sort: 1,
      sorts: [
        {
          value: 1,
          labelName: "Composer",
          labelCname: "作曲家",
        },
        {
          value: 2,
          labelName: "Artist",
          labelCname: "艺术家",
        },
        // {
        //   value: 3,
        //   label: "指挥家",
        // },
        // {
        //   value: 4,
        //   label: "演奏家",
        // },
      ],
      // 字母A_Z
      en: "A",
      ens: [],
      // 请求参数
      params: {},
    };
  },
  methods: {
    // 获取筛选列表
    getEn() {
      let ens = [];
      for (let i = 0; i < 26; i++) {
        ens.push({
          value: String.fromCharCode(65 + i),
          label: String.fromCharCode(65 + i),
        });
      }
      // ens.unshift({
      //   value: "",
      //   label: "All",
      // });
      ens.push({
        value: "#",
        label: "#",
      });
      this.ens = ens;
    },
    // 选择歌手分类
    chooseType(type, item) {
      if (type == "musicType") {
        this.musicType = item.value;
        this.params.musicType = item.value;
      } else if (type == "sort") {
        this.sort = item.value;
        this.params.sort = item.value;
      } else if (type == "en") {
        this.en = item.value;
        this.params.en = item.value;
      }
      // this.params.offset = 0;
      this.$emit("chooseType", this.params);
    },
  },
  mounted() {
    this.getEn();
  },
};
</script>

<style lang="scss" scoped>
::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.filter {
  // height: 100vh;
  border-bottom: 1px #eeeeee solid;
  // margin-bottom: 20px;
}
</style>
